import { DirectiveBinding } from 'vue'
const initImgDirective = {
  mounted(el: HTMLImageElement, bind: DirectiveBinding) {
    console.log('mounted')
    // @ts-ignore
    const resizeObserver = new ResizeObserver((enties) => {
      enties.forEach(() => {
        const w = el.getBoundingClientRect().width
        el.style.display = 'inline'
        const { width, height } = bind.value
        const h = Math.floor((w / width) * height)
        el.style.gridRowEnd = `span ${h}`
      })
    })
    resizeObserver.observe(el)
  }
}
export default initImgDirective
